<template>
  <div>
    <el-form-item label="数据源类型">
      <el-select v-model="type" placeholder="请选择" @change="changeSource">
          <el-option
            v-for="item in dataSourceOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>

    </el-form-item>
    <static-data v-if="type === 'static'" :staticDataValue="configData.chartOption.staticDataValue" @changeStaticData="changeStaticData"></static-data>
    
    <api-data v-if="type === 'url'" :interfaceUrl="configData.chartOption.interfaceURL" 
            :requestMethod="configData.chartOption.requestMethod"
            :requestParameters="configData.chartOption.requestParameters"
            :token="configData.chartOption.token"
            :timeout="configData.chartOption.timeout" @changeApi="changeApi"></api-data>
    
    <data-base-data v-if="type === 'database'" :costomData="configData" :baseType="dataBaseType" @changeDataBase="changeDataBase" @changeTimeout="changeApi"></data-base-data>

    <form-data v-if="type === 'form'" :chartType="configData.chartType" :costomData="configData" @changeForm="changeForm"></form-data>

    <ws-data v-if="type === 'websocket'" :interfaceKey="configData.chartOption.interfaceKey" @getInterfaceKey="getInterfaceKey"></ws-data>

  </div>
</template>

<script>
import { dataSourceOptions} from '../../../ComponentsConfig'
import StaticData from '@/views/tool/datav/components/config/DataConfig/StaticData'
import ApiData from '@/views/tool/datav/components/config/DataConfig/ApiData'
import DataBaseData from '@/views/tool/datav/components/config/DataConfig/DataBaseData'
import FormData from '@/views/tool/datav/components/config/DataConfig/FormData'
import WsData from '@/views/tool/datav/components/config/DataConfig/WsData'

export default {
  props:["dataSourceType","customData","customId","baseType"],
  components:{
    StaticData,
    ApiData,
    DataBaseData,
    FormData,
    WsData
  },
  data() {
    return{
      dataSourceOptions,
      configData:this.customData,
      type:this.dataSourceType,
      activeId:this.customId,
      dataBaseType:this.baseType
    }
  },
  methods: {
    changeSource(val){
      this.$emit("changeSource", val);
    },
    changeStaticData(value,id){
       this.$emit("changeData", value,this.activeId,'static');
    },
    changeApi(val){
      this.$emit("changeData", val,this.activeId,'url');
    },
    changeDataBase(val){
      this.$emit("changeData", val,this.activeId,'database');
    },
    changeForm(val){
      this.$emit("changeData", val,this.activeId,'form');
    },
    getInterfaceKey(val){
      this.$emit("changeData", val,this.activeId,'websocket');
     
    },
  },
}
</script>